<template>
	<view class="contain">

		<view class="form p30 mt60">
			<view class="fx rd20" style="background-color: #ebebeb;padding:10rpx 30rpx 20rpx 30rpx;">
				<u-input type="textarea" placeholder="请输入您的建议或意见，我们会认真查看" height="350" v-model="value"
					maxlength="300"></u-input>
				<u-upload :custom-btn="true" width="115" height="115" :action="action" max-count="3"
					@on-remove="onRemove" @on-uploaded="onUploaded">
					<view class="slot" slot="addBtn">
						<image src="https://xiyanluo.oss-cn-beijing.aliyuncs.com/0lizhi/addImg%402x.png"></image>
					</view>
				</u-upload>
				<view class="number f26 bc9">{{value.length}}/300</view>
			</view>
			<view class="btn f32 bcf b" @click="toSubmit()">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: this.$baseUrl + '/file/upload',
				value: '',
				categoryId: '',
				fileImg: '',
				flag: false,
				fileList: []
			}
		},
		onLoad(options) {
			this.categoryId = options.categoryId
		},
		methods: {
			async toSubmit() {
				if (this.flag) return uni.showToast({
					title: "图片尚未提交成功，请在次确认提交",
					icon: "none"
				})
				if(!this.value){
					this.$u.toast('请输入反馈意见')
					return
				}
				const res = await this.$u.api.fankui({
					categoryId: this.categoryId,
					content: this.value,
					fileImg: this.fileImg
				})
				uni.navigateTo({
					url: '/pages/my/feedback/success'
				})

			},
			onUploaded(list) {
				this.flag = true
				// console.log(this.fileList);
				console.log(list, '4444');
				let picUrl = ''
				this.fileList = []
				list.forEach(item => {

					console.log(item, '9999999999');
					if (picUrl) {
						picUrl += ',' + item.response.data
					} else {
						picUrl = item.response.data
					}

					this.fileList.push({
						url: item.response.data
					})
				})
				console.log(list);
				if (this.fileList.length === list.length) {
					this.flag = false
				}
				this.fileImg = picUrl
			},
			onRemove(index, lists) {
				console.log(index);
				console.log(lists, 'lists');
				this.fileList.splice(index, 1);
				const imagesAll = []
				this.fileList.forEach(item => {

					imagesAll.push(item.url)
				})
				console.log(imagesAll.toString());
				this.fileImg = ''
				this.fileImg = imagesAll.toString()
				console.log(this.fileList);
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style>
	/deep/.uni-textarea-placeholder {
		border-radius: 15rpx;
		padding-top: 30rpx;
		padding-left: 30rpx;
		background-color: #eeeee !important;
	}

	.contain {
		padding: 58rpx 30rpx 0;
	}

	.slot image {
		width: 115rpx;
		height: 115rpx;
	}

	.fx {
		position: relative;
	}

	.number {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx
	}

	.btn {

		background: linear-gradient(-90deg, #FF8D5F, #FF6A55);
		border-radius: 60rpx;
		text-align: center;
		margin-top: 70rpx;
		padding: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>